<template>
  <div class="user-management">
    <el-container>
      <el-main>
        <el-card class="management-card">
          <template #header>
            <div class="card-header">
              <h2>用户管理</h2>
            </div>
          </template>
          <el-table
            :data="users"
            style="width: 100%"
            border
            stripe
            v-loading="loading"
          >
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="phone" label="手机号码" />
            <el-table-column prop="role" label="角色">
              <template #default="scope">
                <el-tag
                  :type="scope.row.role === 'admin' ? 'danger' : scope.row.role === 'landlord' ? 'success' : 'info'"
                >
                  {{ scope.row.role === 'admin' ? '管理员' : scope.row.role === 'landlord' ? '房东' : '租客' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="注册时间">
              <template #default="scope">
                {{ new Date(scope.row.created_at).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="handleDelete(scope.row)"
                  :disabled="scope.row.role === 'admin'"
                  round
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { userApi } from '../api'

const users = ref([])
const loading = ref(false)

// 获取用户列表
const fetchUsers = async () => {
  loading.value = true
  try {
    const data = await userApi.getUsers()
    users.value = data
  } catch (error) {
    ElMessage.error('获取用户列表失败')
  } finally {
    loading.value = false
  }
}

// 处理删除用户
const handleDelete = (user) => {
  ElMessageBox.confirm(
    `确定要删除用户 ${user.username} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await userApi.deleteUser(user.id)
      ElMessage.success('删除成功')
      fetchUsers()
    } catch (error) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {})
}

onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
.user-management {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e3f0ff 100%);
  padding: 24px;
}
.management-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(64,158,255,0.08);
  background: #fff;
  animation: fadeInUp 0.5s;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .user-management { padding: 12px; }
}
</style> 